<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Tetris</title>
    <script src="tetris.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body onLoad="testFigureGeneration(), generateStatisticsTable()">

<div id="caption">SIMPLE TETRIS</div>

<div id="pause">Game is paused</div>
<div id="gameIsOver_message">Game is over</div>

<div id="game_field"></div>

<div id="wrapper">
<table id="navigation">
    <tr>
        <td></td><td><button onclick="startGame()"> start game </button></td><td></td>
    </tr>
    <tr>
        <td></td><td><button id="pause_button" onclick="pauseGameContinueGame()"> pause game </button></td><td></td>
    </tr>
    <tr>
        <td></td>
        <td><button onclick="rotateFigure()"> rotate </button></td>
        <td></td>
    </tr>
    <tr>
        <td><button onclick="moveFigureLeft()"> < </button></td>
        <td><button onclick="dropFigureDown()"> v </button></td>
        <td><button onclick="moveFigureRight()"> > </button></td>
    </tr>
</table>


    <table id="game_statistics">
        <tr>
            <td colspan="2">GAME STATISTICS</td>
        </tr>
        <tr><td>&nbsp</td></tr>
        <tr>
            <td id="row_label">ROWS COLLECTED</td>
            <td id="collected_rows">0</td>
        </tr>
        <tr><td>&nbsp</td></tr>
        <tr>
            <td colspan="2">FIGURES COLLECTED</td>
        </tr>
        <tr>
            <td id="j">
                <div id="j_div"></div>
            </td>
            <td id="j_cnt">0</td>
        </tr>
        <tr>
            <td id="i">
                <div id="i_div"></div>
            </td>
            <td id="i_cnt">0</td>
        </tr>
        <tr>
            <td id="l">
                <div id="l_div"></div>
            </td>
            <td id="l_cnt">0</td>
        </tr>
        <tr>
            <td id="o">
                <div id="o_div"></div>
            </td>
            <td id="o_cnt">0</td>
        </tr>
        <tr>
            <td id="s">
                <div id="s_div"></div>
            </td>
            <td id="s_cnt">0</td>
        </tr>
        <tr>
            <td id="t">
                <div id="t_div"></div>
            </td>
            <td id="t_cnt">0</td>
        </tr>
        <tr>
            <td id="z">
                <div id="z_div"></div>
            </td>
            <td id="z_cnt">0</td>
        </tr>
    </table>

</div>
<br>

</body>
</html>